<template>
    <div class="carPage">
      <!-- header -->
      <div class="search_header">
          <van-nav-bar
            title="购物车"
            fixed
          />
      </div>
      <div class="car_content">
        <div v-if="carList.length > 0">
          <!-- 小标题 -->
          <div class="car_title">
            <p>共{{ carTotal }}件商品</p>
            <p @click="edit" class="edit">编辑</p>
          </div>
          <!-- body -->
          <div class="car_body">
            <div class="car_item" v-for="item in carList" :key="item.goods_id">
              <van-checkbox @click="changeCheck(item.goods_id)" :value="item.isChecked"></van-checkbox>
              <img :src="item.goods.goods_image" height="90%">
              <div class="item_text">
                <p class="item_name">{{item.goods.goods_name}}</p>
                <div class="item_other">
                  <p>￥{{ item.goods.goods_price_min }}</p>
                  <!-- 传参：num, id, skuid -->
                  <addBut @input="value => changeCount(value, item.goods_id, item.goods_sku_id)" :value="item.goods_num"></addBut>
                </div>
              </div>
            </div>
          </div>
          <!-- 底部 -->
          <div class="car_footer">
            <div  @click="changeAll" class="allCheck">
              <van-checkbox :value="isAllChecked"></van-checkbox>
              <span>全选</span>
            </div>
            <div>
              <span>合计：<span  class="totalPrice">￥{{ selPrice }}</span></span>
              <button @click="goPay" v-if="!isEdit" :class="{active: selCount === 0}">去结算（{{ selCount }}）</button>
              <button v-else @click="delCar" :class="{active: selCount === 0}">删除</button>
            </div>
          </div>
        </div>
        <div v-else class="car_other">
          <img src="@/assets/empty.png" alt="">
          <button @click="$router.push('/')">去逛逛</button>
        </div>
      </div>
    </div>
</template>

<script>
import addBut from '@/components/addBut.vue'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'CarIndex',
  data () {
    return {
      allChecked: true,
      isEdit: false
    }
  },
  components: {
    addBut
  },
  computed: {
    ...mapState('car', ['carList']),
    ...mapGetters('car', ['carTotal', 'selCarList', 'selCount', 'selPrice', 'isAllChecked'])
  },
  created () {
    if (this.$store.getters.token) {
      this.$store.dispatch('car/getCarAction')
    }
    // console.log(this.carTotal)
  },
  methods: {
    changeCheck (goodsid) {
      this.$store.commit('car/changeCheck', goodsid)
    },
    changeAll () {
      this.$store.commit('car/changeAll', !this.isAllChecked)
    },
    changeCount (value, goodsId, goodsSkuId) {
      this.$store.dispatch('car/changeCountAction', {
        value,
        goodsId,
        goodsSkuId
      })
    },
    edit () {
      this.isEdit = !this.isEdit
    },
    async delCar () {
      if (this.selCount === 0) return
      // console.log(this.selCount)
      await this.$store.dispatch('car/delCarAction')
    },
    goPay () {
      // 判断是否有选中
      if (this.selCount > 0) {
        this.$router.push({
          path: '/pay',
          query: {
            mode: 'cart',
            cartIds: this.selCarList.map(item => item.id).join(',') // 'cartId,cartId'
          }
        })
      }
    }
  },
  // 监控编辑状态，动态控制复选框状态
  // 进入编辑状态，全不选中
  watch: {
    isEdit (value) {
      if (value) {
        this.$store.commit('car/changeAll', false)
      } else {
        this.$store.commit('car/changeAll', true)
      }
    }
  }
}
</script>

<style scoped>
  .carPage{
    height: 575px;
    overflow: scroll;
  }
  .car_content{
    padding-top: 46px;
  }
 .car_title{
  width: 370px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
 }
 .edit:hover{
  color: red;
 }
 .car_item{
  font-size: 18px;
  height: 120px;
  margin: 5px;
  display: flex;
  /* justify-content: flex-start; */
 }
 .car_item img{
  margin-left: 5px;
  margin-right: 5px;
 }
 .item_text{
  width: 220px;
  /* 子元素一上一下对齐 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
 .item_name{
  /* p标签设置仅显示两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
  .item_other{
    width: 220px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
  }
  .item_other p{
    color: red;
  }
  .car_footer{
    font-size: 19px;
    width: 370px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0px;
    bottom: 50px
  }
  .totalPrice{
    margin-right: 10px;
    color: red;
  }
  .car_footer button{
    width: 120px;
    text-align: center;
    background-color: rgba(248, 84, 7, 0.6);
    color:white;
    border-radius: 10px;
    border: none;
  }
  .allCheck{
    display: flex;
  }
  .active{
    background-color: #ff6635;
  }
  .car_other{
    text-align: center;
    margin-top: 50px;
  }
  .car_other button{
    width: 80px;
    border: none;
    border-radius: 10px;
    background-color: #ff6666;
    color: white;
  }
</style>
